<style include="cr-shared-style shimless-rma-shared">
  #navigationButtonWrapper {
    bottom: var(--header-footer-height);
    position: absolute;
  }

  #continue {
    margin-inline-end: 8px;
  }
</style>

<base-page>
  <div slot="left-pane">
    <h1 tabindex="-1">[[i18n('restockTitleText')]]</h1>
    <div class="instructions">[[i18n('restockInstructionsText')]]</div>
    <div id="navigationButtonWrapper">
      <cr-button id="continue" class="action-button"
          on-click="onRestockContinueButtonClicked_"
          disabled="[[allButtonsDisabled]]">
        [[i18n('restockContinueButtonText')]]
      </cr-button>
      <cr-button id="shutdown" on-click="onShutdownButtonClicked_"
          disabled="[[allButtonsDisabled]]">
        [[i18n('restockShutdownButtonText')]]
      </cr-button>
    </div>
  </div>
  <div slot="right-pane">
    <div class="illustration-wrapper" aria-hidden="true">
      <img class="illustration" src="illustrations/repair_start.svg"
          alt="[[i18n('repairStartAltText')]]">
    </div>
  </div>
</base-page>
